<!--
 * @Description: 
 * @Version: 
 * @Author: GabbyMrH
 * @Email: gabbymrh@gmail.com
 * @Date: 2021-01-04 15:14:17
 * @LastEditors: GabbyMrH
 * @LastEditTime: 2021-01-05 11:07:29
-->
<template>
  <view class="middle">
    <u-grid :col="4" :border="border"  class="u-grid_o">
      <u-grid-item>
        <text class="u-grid-item">2</text>
        <view class="grid-text">我的店铺</view>
      </u-grid-item>
      <u-grid-item>
         <text class="u-grid-item">20</text>
        <view class="grid-text">推荐生意</view>
      </u-grid-item>
      <u-grid-item>
        <text class="u-grid-item">18</text>
        <view class="grid-text">参加活动</view>
      </u-grid-item>
      <u-grid-item>
      <text class="u-grid-item">5</text>
        <view class="grid-text">会员邀请</view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
@Component({ name: "middle" })
export default class extends Vue {
  @Prop({ default: false }) private border!: boolean;
}
</script>

<style lang="scss" >
.middle {
  width: 690upx;
  height: 174upx;
  border-radius: 10upx !important;
  margin-left: 30upx;
  background-color:#ffffff;
  margin-top: 22upx;
  z-index: 999;
  position: relative;
  .u-grid-item {
    font-size: 36upx;
    font-weight: bolder;
  }
  .grid-text{
      margin-top: 20upx;
  }
  
}
.u-grid_o{
  width: 100%;
  height: 150upx;
  margin-top: 2upx;
  position:absolute;
}
</style>